<template>
    <div class="container">
        <!-- <h1>母子健康手册</h1> -->
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h2 class="text-lg font-medium">张美玲</h2>
                    <p class="text-gray-500 text-sm mt-1">28 岁 · 第一胎</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-600">预产期</p>
                    <p class="text-lg font-medium text-blue-600">2024-08-15</p>
                </div>
            </div>

            <div class="mb-4">
                <div class="flex justify-between text-sm mb-2">
                    <span>当前孕周</span>
                    <span class="text-blue-600">24 周</span>
                </div>
                <el-progress :percentage="60" :format="() => ''" />
            </div>

            <div class="text-sm text-gray-500">
                最近产检：2024-02-15
            </div>
        </div>
        
        <!-- 健康数据图表 -->
        <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
            <h3 class="text-lg font-medium mb-4">健康指标趋势</h3>
            <div ref="chartRef" class="w-full h-64" style="width: 900px;"></div>
        </div>

        <!-- 产检记录 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">产检记录</h3>
                <el-button type="primary" class="!rounded-button">查看全部</el-button>
            </div>
            <el-timeline>
                <el-timeline-item v-for="(record, index) in checkupRecords" :key="index" :timestamp="record.date"
                    :type="record.type">
                    <h4 class="font-medium">{{ record.title }}</h4>
                    <p class="text-sm text-gray-500 mt-1">{{ record.desc }}</p>
                </el-timeline-item>
            </el-timeline>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref();

const mainModules = [
    {
        title: '产检记录',
        desc: '查看历次产检信息',
        icon: 'Stethoscope',
        iconColor: 'text-blue-500'
    },
    {
        title: '健康监测',
        desc: '体重、血压记录',
        icon: 'DataLine',
        iconColor: 'text-green-500'
    },
    {
        title: '胎儿发育',
        desc: '了解胎儿发育状况',
        icon: 'Monitor',
        iconColor: 'text-purple-500'
    },
    {
        title: '营养建议',
        desc: '孕期营养膳食指导',
        icon: 'Reading',
        iconColor: 'text-orange-500'
    },
    {
        title: '产检提醒',
        desc: '下次产检预约提醒',
        icon: 'Bell',
        iconColor: 'text-red-500'
    },
    {
        title: '知识学习',
        desc: '孕期保健知识',
        icon: 'Reading',
        iconColor: 'text-teal-500'
    }
];

const bottomNavs = [
    {
        title: '在线咨询',
        icon: 'Service',
        iconColor: 'text-blue-500'
    },
    {
        title: '紧急求助',
        icon: 'FirstAidKit',
        iconColor: 'text-red-500'
    },
    {
        title: '预约产检',
        icon: 'Timer',
        iconColor: 'text-green-500'
    },
    {
        title: '报告查询',
        icon: 'Document',
        iconColor: 'text-purple-500'
    }
];

const checkupRecords = [
    {
        date: '2024-02-15',
        title: '第 6 次产检',
        desc: '各项指标正常，胎儿发育良好',
        type: 'success'
    },
    {
        date: '2024-01-15',
        title: '第 5 次产检',
        desc: '建议适当补充叶酸',
        type: 'warning'
    },
    {
        date: '2023-12-15',
        title: '第 4 次产检',
        desc: '一切正常，继续保持',
        type: 'success'
    }
];

onMounted(() => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        const option = {
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['体重', '血压']
            },
            xAxis: {
                type: 'category',
                data: ['12周', '16周', '20周', '24周', '28周']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '体重(kg)'
                },
                {
                    type: 'value',
                    name: '血压(mmHg)'
                }
            ],
            series: [
                {
                    name: '体重',
                    type: 'line',
                    data: [56, 57.5, 59, 61, 62.5]
                },
                {
                    name: '血压',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [110, 112, 115, 113, 116]
                }
            ]
        };
        chart.setOption(option);
    }
})
</script >
<style lang="less" scoped>
</style>